<template>
    <div class="login-container">
        <div class="logo">
            <img src="../assets/logo-blue.png"/>
            <span>${systemName}</span>
        </div>
        <a-form :model="loginParams"
                ref="formRef"
                class="login-form"
                autocomplete="off">
            <h3 class="title">用户登录</h3>
            <a-form-item name="email"
                         :rules="[{ required: true, message: '请输入邮箱!' }]">
                <a-input v-model:value="loginParams.email" placeholder="邮箱">
                    <template #prefix>
                        <user-outlined style="color: rgba(0, 0, 0, 0.25)"/>
                    </template>
                </a-input>
            </a-form-item>
            <a-form-item name="password" style="margin-bottom: 30px"
                         :rules="[{ required: true, message: '请输入密码!' }]">
                <a-input-password v-model:value="loginParams.password" placeholder="密码">
                    <template #prefix>
                        <lock-outlined style="color: rgba(0, 0, 0, 0.25)"/>
                    </template>
                </a-input-password>
            </a-form-item>
            <a-form-item>
                <a-button type="primary"
                          style="width:100%;"
                          @click="submitLogin"
                          :loading="loading">
                    登录
                </a-button>
            </a-form-item>
        </a-form>

        <div class="footer">
            <div class="copyright">
                {{copyright}}
            </div>
        </div>
    </div>
</template>

<script>
    import {defineComponent, reactive, toRefs, ref} from 'vue';
    import {message} from 'ant-design-vue';
    import {useRouter} from 'vue-router';
    import {useStore} from '@/store';
    import WebApi from "@/webapi/WebApi";

    export default defineComponent({
        components: {},
        setup() {
            const state = reactive({
                loginParams: {},
                loading: false
            });
            const formRef = ref();
            const router = useRouter();

            const submitLogin = async () => {
                try {
                    await formRef.value.validateFields();
                    state.loading = false;
                    setTimeout(() => {
                        state.loading = false;
                    }, 6000);
                    WebApi.login(state.loginParams).then(
                        (resp) => {
                            state.loading = false;
                            if (resp.data.data) {
                                useStore().setUserInfo(resp.data.data);
                                router.push('/');
                            } else {
                                message.error('用户名或密码错误！');
                            }
                        }
                    );
                } catch (error) {
                    console.log('Validate failed: ', error);
                }
            };

            return {
                ...toRefs(state),
                formRef,
                submitLogin,
                copyright: 'Copyright © 2021~' + new Date().getFullYear() + ' XXX公司 - xxx部门'
            };
        },
    });
</script>

<style lang="less" scoped>
    .login-container {
        display: flex;
        flex-direction: column;
        padding: 112px 0 24px;
        box-sizing: border-box;
        width: 100%;
        height: 100vh;
        overflow-y: scroll;
        background-image: url();
        background-repeat: no-repeat;
        background-position: center right;
        background-size: 100%;

        .logo {
            height: 48px;
            margin-bottom: 40px;
            display: flex;
            align-items: center;
            justify-content: center;

            img {
                height: 44px;
                width: 44px;
                margin-right: 16px;
            }

            span {
                font-size: 30px;
                font-weight: 600;
            }
        }

        .login-form {
            .title {
                margin: 0px auto 30px auto;
                text-align: center;
                color: #505458;
            }

            border-radius: 6px;
            margin: 0px auto;
            width: 450px;
            padding: 30px 50px 20px 50px;
            background: #fff;
            border: 1px solid #eaeaea;
            text-align: left;
            box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.1);
        }

        .footer {
            padding: 48px 16px 24px;

            .copyright {
                text-align: center;
                color: rgba(0, 0, 0, 0.5);
                font-size: 14px;

                i {
                    margin: 0 4px;
                }
            }
        }
    }
</style>